<template>
  <el-table :data="tableData"
    style="height:100%; --el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
    :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
    <el-table-column prop="evaluateItem" label="决策项" />
    <el-table-column prop="itemVal" label="决策值" width="180" />
    <el-table-column prop="stage" label="时间段" width="220" />
  </el-table>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { BASE_URL } from '@/utils/common.js'
import elTableMixin from '@/utils/elTableMixin.js'

const { customHeaderCell, customCell, getClassName } = elTableMixin();

const router = useRouter()
const route = useRoute()

onMounted(
  async () => {
    let stage = route.params.paramName
    let url = BASE_URL + '/getOptimizeThrees?stage=' + stage;
    try {
      const response = await axios.get(url)
      tableData.value = response.data;

    } catch (error) {
      console.log(error)
    }

  }
)

// 监听路由变化
watch(
  () => route.path,
  async (newPath, oldPath) => {
    // console.log('路由变化了，新的路径是：', newPath);
    // console.log('路由变化了，旧的路径是：', oldPath);
    let i = newPath.indexOf('/effect/optimaze-ctrl/optimaze-child3/information-table/')
    if (i >= 0) {
      //  alert(route.params.paramName)
      let stage = route.params.paramName
      let url = BASE_URL + '/getOptimizeThrees?stage=' + route.params.paramName;
      try {
        const response = await axios.get(url)
        tableData.value = response.data;

      } catch (error) {
        console.log(error)
      }

    }

  },
  { immediate: true } // 立即执行监听函数
);

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>

<style scoped lang="scss"></style>